<!-- 评论列表 -->
<template>
  <div v-loading="isOp">
    <el-empty v-if="comments.records.length == 0" description="'没有找到有关的内容'"></el-empty>
    <div class="comments-area pt-0 mt-0">
      <div class=" wow fadeIn animated" v-for="(item,i) in comments.records" :key="i">
        <div class="single-comment justify-content-between d-flex">
          <div class="user justify-content-between d-flex">
            <div class="thumb">
              <!-- 头像 -->
              <router-link :to="{ name: 'author', params: { id:user.id } }">
                <img :src="user.avater" alt="">
              </router-link>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="d-flex justify-content-between">
                  <div class="d-flex align-items-center">
                    <h5>
                      <router-link :to="{ name: 'author', params: { id:user.id } }" style="white-space:nowrap;">
                        {{user.nickname}}
                      </router-link>
                    </h5>
                    <p class="date" style="white-space:nowrap;">{{$commons.dateStr(item.timestamp)}}</p>
                    <el-dialog title="提示" :visible.sync="dialogVisible" width="20%" :modal="false">
                      <span>删除后不可恢复，确定删除？</span>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="remove()">确 定</el-button>
                      </span>
                    </el-dialog>
                    <!-- <el-popconfirm title="确定要删除吗？" @confirm="deleteComment(item.id)"> -->
                    <a href="javascript:void(0)" class="btn-reply ml-10" @click="deleteComment(item)">删除</a>
                    <!-- </el-popconfirm> -->
                  </div>
                </div>
              </div>
              <div :class="$commons.isMobile()?'col-8':'col-10 desc mt-10'">
                <p class="">
                  {{item.parentid==null?'评论':'回复'}}
                  <a href="javascript:void(0)" @click="toWindod(users.get(item.replaceid).id)" v-if="item.parentid!=null"
                    class="author-avatar text-info">
                    <span class="text-info">
                      {{users.get(item.replaceid).nickname}}
                    </span>
                  </a>
                  <span class="text-info">
                    ：
                  </span>
                  {{item.content}}
                </p>

              </div>
              <!-- <div :class="$commons.isMobile()?'col-4':'col-2 mt-10'">
                <a href="javascript:void(0)" @click="edit(i,1)"><i :class="item.thumbsStatus == 1?'fa fa-thumbs-up':'fa fa-thumbs-o-up'"></i></a>
                {{$commons.formatNumber(item.thumbs)}}
                <a href="javascript:void(0)" @click="edit(i,-1)"><i :class="item.thumbsStatus == -1?'fa fa-thumbs-down':'fa fa-thumbs-o-down'"></i></a>
              </div> -->
              <div class="col-12 author-bio p-20 border-radius-10 wow fadeIn animated bg-light"
                style="white-space:nowrap;">
                <router-link :to="{ name: 'blog', params: { id:docs.get(item.objectid).id } }"
                  style="white-space:nowrap;">
                  <span class="comment">
                    {{overflowHidForText(docs.get(item.objectid).title+'：'+docs.get(item.objectid).slogan,50)}}
                  </span>

                </router-link>

                <!-- <router-link :to="{ name: 'author', params: { id:item.targetUserId } }"> {{item.targetNickname}}
                </router-link>：
                <router-link :to="{name:'blog', params:{id:item.targetId}}">{{$commons.isMobile()?$commons.subLongString(item.targetTitle,12):item.targetTitle}}</router-link> -->
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
    <div class="pagination-area mb-30 mt-20 wow fadeInUp animated">
      <nav aria-label="Page navigation example">
        <el-pagination style="float:left;" layout="prev, pager, next" :total="comments.total"
          :current-page="comments.current" @current-change="pageChange" :page-size="comments.size">
        </el-pagination>
      </nav>
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ['id', 'size', 'user'],
    data() {
      //这里存放数据
      return {
        dialogVisible: false,
        isOp: false,
        current: -1,
        comments: {
          current: 1,
          size: 4
        },
        users: new Map(),
        docs: new Map()
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      id: function (n, o) {
        this.getComments();
      }
    },
    //方法集合
    methods: {
      async remove() {
        const pram = {
          id: this.current.id,
          objectid: this.current.objectid
        }
        this.dialogVisible = false;
        this.isOp = true;
        await this.$api.comment.delete(pram)
        this.getComments();
      },
      toWindod(data) {
        window.open("#/author/" + data);
      },
      overflowHidForText(val, max = 42) {
        let textLength = val.length;
        let resultText = '';
        if (textLength > max) {
          resultText = val.slice(0, max) + '...'
        } else {
          resultText = val
        }
        return resultText
      },
      async getLinkData() {
        var uids = new Set();
        var dids = new Set();
        for (const c of this.comments.records) {
          if (c.replaceid != null && !this.users.has(c.replaceid)) {
            uids.add(c.replaceid);
          }
          if (!this.docs.has(c.objectid)) {
            dids.add(c.objectid)
          }
        }
        const pramd = {
          ids: Array.from(dids).sort()
        }
        const pramu = {
          ids: Array.from(uids).sort()
        }
        if (dids.size > 0) {
          var resd = await this.$api.article.docs(pramd);
          if (resd.code == 20000) {
            for (const d of resd.data) {
              this.docs.set(d.id, d);
            }
          }
        }
        if (uids.size > 0) {
          var resu = await this.$api.user.users(pramu);
          if (resu.code == 20000) {
            for (const u of resu.data) {
              this.users.set(u.id, u);
            }
          }
        }
        this.$forceUpdate();

      },
      pageChange(page) {
        this.comments.current = page;
        this.getComments();
      },
      async getComments() {
        this.isOp = true;
        const pram = {
          page: {
            current: this.comments.current,
            size: this.comments.size
          },
          comment: {
            userid: this.id
          }
        }
        var res = await this.$api.comment.getList(pram);
        if (res.code == 20000) {
          this.comments = res.data;
        }
        this.getLinkData();
        this.isOp = false;
      },
      async deleteComment(num) {
        this.dialogVisible = true;
        this.current = num;
      },
      edit(i, n) {
        var pram = {
          id: this.id,
          commentId: this.comments.comment[i].id,
          thumbsStatus: n,
          edit: 0
        }
        if (this.comments.comment[i].thumbsStatus == n) {
          if (n == 1) {
            pram.edit = -1;
          } else {
            pram.edit = 1;
          }
          pram.thumbsStatus = 0;
          this.comments.comment[i].thumbsStatus = 0;

        }
        if (n == 1) {
          this.comments.comment[i].thumbsStatus = 1;
          pram.edit = 1;
        } else {
          this.comments.comment[i].thumbsStatus = -1;
          pram.edit = -1;
        }
        this.$api.commens.editThumbsStatus(pram)
      },
      nextPage(num) {
        var n = this.comments.path + num
        var max = Math.ceil(this.comments.size / this.size)
        if (n <= 0 || n > max) {
          Notiflix.Report.Info('提示', '没有更多了', '好的');
        } else {
          this.getComments(this.id, n);
        }
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getComments();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>

</style>
